<template>
    <div id="testdetail">
      <el-header class="head" style="height: 75px;">
        <!-- 导航 -->
        <div class="nav">
          <!-- 导航左 -->
          <div class="left">
            <div class="logo" style="display: flex">
              <el-image
                :src="src"
                style="
                  width: 180px;
                  height: 65px;
                  padding-top: 5px;
                  margin-right: 25px;
                "
              ></el-image>
            </div>
          </div>
          <!-- 导航中 -->
          <div class="mid">
            <span class="demonstration">考试名称: &nbsp;</span
            ><span class="testname">{{ testname }}&nbsp;</span
            ><span class="username">({{ username }})</span>
          </div>
          <div>
          </div>
          <!-- 导航右  用户头像，用户名 -->
          <el-col
            :span="12"
            class="right"
            style="display: flex; width: 500px; padding-left: 300px"
          >
            <div class="block" style="padding: 12px">
              <el-avatar :size="50" :src="circleUrl"></el-avatar>
            </div>
            <div class="user">{{ user }}</div>
          </el-col>
        </div>
      </el-header>
       <!-- 详情 -->
      <div class="content-detail">
        <div class="c-body-left">
          <el-row class="tac" style="margin-left: 10px">
            <el-col>
              <h4>试题详情</h4>
              <el-menu
                router
                default-active="1"
                :default-openeds="openeds"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
              >
                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-edit"></i>
                    <span>单选题(每题2分)</span>
                  </template>
                  <el-menu-item v-for="(value,index) in radiolist" :key="index">
                    <i class="el-icon-view"></i>
                    <router-link :to="{name:'radioanswer1',query:{rid:value.rid,stContent:value.stContent,stSelecta:value.stSelecta,stSelectb:value.stSelectb,stSelectc:value.stSelectc,stSelectd:value.stSelectd,stAnswer:value.stAnswer,ksAnswer:value.ksAnswer,stScore:value.stScore,ksScore:value.ksScore,stExplain:value.stExplain}}" custom v-slot="{ navigate }">
                      <span @click="navigate" @keypress.enter="navigate" role="link">
                        题目{{ index + 1 }}
                      </span>
  
                    </router-link>
                  </el-menu-item>
                </el-submenu>
  
                <el-submenu index="2">
                  <template slot="title">
                    <i class="el-icon-document-copy"></i>
                    <span>多选题(每题5分)</span>
                  </template>
                  <el-menu-item v-for="(value,index) in checklist" :key="index">
                    <i class="el-icon-view"></i>
                    <router-link :to="{name:'checkboxanswer1',query:{cid:value.cid,stContent:value.stContent,stSelecta:value.stSelecta,stSelectb:value.stSelectb,stSelectc:value.stSelectc,stSelectd:value.stSelectd,stAnswer1:value.stAnswer1,stAnswer2:value.stAnswer2,stAnswer3:value.stAnswer3,stAnswer4:value.stAnswer4,ksAnswer1:value.ksAnswer1,ksAnswer2:value.ksAnswer2,ksAnswer3:value.ksAnswer3,ksAnswer4:value.ksAnswer4,stScore:value.stScore,ksScore:value.ksScore,stExplain:value.stExplain}}" custom v-slot="{ navigate }">
                      <span @click="navigate" @keypress.enter="navigate" role="link">
                        题目{{ index + 1 }}
                      </span>
                    </router-link>
                  </el-menu-item>
                </el-submenu>
  
                <el-submenu index="3">
                  <template slot="title">
                    <i class="el-icon-document-checked"></i>
                    <span>判断题(每题2分)</span>
                  </template>
                  <el-menu-item
                    v-for="(value,index) in jugelist" :key="index">
                    <i class="el-icon-view"></i>
                    <router-link :to="{name:'juge1',query:{jid:value.jid,stContent:value.stContent,stSelecta:value.stSelecta,stSelectb:value.stSelectb,stSelectc:value.stSelectc,stSelectd:value.stSelectd,stAnswer:value.stAnswer,ksAnswer:value.ksAnswer,stScore:value.stScore,ksScore:value.ksScore,stExplain:value.stExplain}}"  custom v-slot="{ navigate }">
                      <span @click="navigate" @keypress.enter="navigate" role="link">
                        题目{{ index + 1 }}
                      </span>
                      </router-link>
                  </el-menu-item>
                </el-submenu>
              </el-menu>
            </el-col>
          </el-row>
        </div>
        <div class="c-body-right">
          <!-- 考试成绩 -->
          <Score class="score">
            <template v-slot:score>
              <div>
                <span>考试成绩:&nbsp;<span style="color: red; font-size: 22px">{{Score}}</span></span>
              </div>
            </template>
          </Score>
          <!-- 占位符 -->
          <router-view></router-view>   
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import {mapState} from 'vuex';
  import Score from "../components/student/mytest/detail/Score.vue";
  
  export default {
    data() {
      return {
        src: require("../assets/logolc.png"),
        circleUrl: require("../assets/user.jpg"),
        Score:88,
        testname: "web前端基础",
        username: "王玲玲",
        user: "稳妥的辣椒投手", 
        openeds:['1']
      };
    },
    components: {
      Score,
    },
    computed:{
      // 将辅助函数 mapState 映射到 computed 计算属性中  当作普通变量来用
        ...mapState(['radiolist','checklist','jugelist']),
    },
    methods: {
      
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
    //   goBack(){
    //     this.$router.push('/student/mytest')
    //   }
    },
    
  };
  </script>
  
  <style lang="less" scoped>
  
  #testdetail {
    width: 100%;
    height: 100%;
    background-color: #f0f2f5;
  }
  
  .nav {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    .left {
      width: 400px;
      padding-left: 50px;
    }
    .mid {
      width: 300px;
      font-size: 20px;
      .score {
        color: red;
      }
    }
  }
  .el-header {
    width: 100%;
    background-color: rgb(0, 21, 41);
    color: rgb(166, 173, 180);
    text-align: center;
    line-height: 75px;
  }
  .content-detail {
    margin: 0 auto;
    box-sizing: border-box;
    width: 85%;
    height: 850px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    .c-body-left {
      flex: 2;
      padding-top: 10px;
      height: 100%;
      // border: 1px solid #d9d9d9;
    }
    .c-body-right {
      flex: 8;
      height: 100%;
      // border: 1px solid #d9d9d9;
      box-sizing: border-box;
      // margin-top: 64px;
      margin-left: 15px;
      background-color: #fff;
      padding: 20px;
      position: relative;
    }
  }
  .score {
    width: 150px;
    height: 80px;
    border: 1px solid black;
    position: absolute;
    top: 40px;
    right: 40px;
    text-align: center;
    line-height: 80px;
  }
  </style>